<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <!-- 
        生命周期：
            1、又名：生命周期回调函数、生命周期函数、生命周期钩子
            2、是什么：Vue再关键时刻帮我们调用的一些特殊名称的函数
            3、生命周期函数的名字不可变，但函数内容是可以编写的
            4、生命周期函数中的this只想vm 或者 组件实例对象 
    -->

    <div id="root">
        <h2 :style="{opacity}">生命周期</h2>
    </div>

    <script type="text/javascript">
         Vue.config.productionTip = false;//阻止vue在启动的时候生成生产提示

         const a = new Vue({
            el:"#root",
            data:{
                opacity:1
            },
            //当Vue完成模板的解析并且把真实的DOM元素放入页面后调用mounted
            mounted(){
                setInterval(()=>{
                    this.opacity -= 0.01;
                    if(this.opacity<=0) this.opacity = 1
                },16)
            }
         })

    </script>
</body>
</html>